<!DOCTYPE html>
<meta charset="UTF-8">
<table id="tg" data-type="gridtree" title="右键菜单" style="width: 700px; height: 250px"
	data-define="
				iconCls: 'icon-ok',
				rownumbers: true,
				animate: true,
				collapsible: true,
				fitColumns: true,
				method:'get',url: '${rc.contextPath}/assets/ui/jww/demo/testdata/gridtree_data2.json',
				idField: 'id',
				treeField: 'name',
				onContextMenu: onContextMenu
			">
	<thead>
		<tr>
			<th data-define="field:'name',width:180">任务名称</th>
			<th data-define="field:'persons',width:60,align:'right'">责任人</th>
			<th data-define="field:'begin',width:80">开始日期</th>
			<th data-define="field:'end',width:80">结束日期</th>
			<th data-define="field:'progress',width:120,formatter:formatProgress">进程</th>
		</tr>
	</thead>
</table>
<div id="mm" data-type="menu" style="width: 120px;">
	<div onclick="append()" data-define="iconCls:'icon-add'">增加</div>
	<div onclick="remove()" data-define="iconCls:'icon-remove'">删除</div>
	<div class="menu-sep"></div>
	<div onclick="collapse()">关闭</div>
	<div onclick="expand()">展开</div>
</div>
<script type="text/javascript">
    function formatProgress(value) {
	    if (value) {
		    var s = '<div style="width:100%;border:1px solid #ccc">' + '<div style="width:' + value
		            + '%;background:#cc0000;color:#fff">' + value + '%' + '</div>'
		    '</div>';
		    return s;
	    } else {
		    return '';
	    }
    }
    function onContextMenu(e, row) {
	    e.preventDefault();
	    $(this).gridtree('select', row.id);
	    $('#mm').menu('show', {
	        left : e.pageX,
	        top : e.pageY
	    });
    }
    var idIndex = 100;
    function append() {
	    idIndex++;
	    var d1 = new Date();
	    var d2 = new Date();
	    d2.setMonth(d2.getMonth() + 1);
	    var node = $('#tg').gridtree('getSelected');
	    $('#tg').gridtree('append', {
	        parent : node.id,
	        data : [ {
	            id : idIndex,
	            name : '新任务' + idIndex,
	            persons : parseInt(Math.random() * 10),
	            begin : $.fn.datebox.defaults.formatter(d1),
	            end : $.fn.datebox.defaults.formatter(d2),
	            progress : parseInt(Math.random() * 100)
	        } ]
	    })
    }
    function remove() {
	    var node = $('#tg').gridtree('getSelected');
	    if (node) {
		    $('#tg').gridtree('remove', node.id);
	    }
    }
    function collapse() {
	    var node = $('#tg').gridtree('getSelected');
	    if (node) {
		    $('#tg').gridtree('collapse', node.id);
	    }
    }
    function expand() {
	    var node = $('#tg').gridtree('getSelected');
	    if (node) {
		    $('#tg').gridtree('expand', node.id);
	    }
    }
</script>
